<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :custom-class="'panna-dialog_medium'"
      title="自动分配检测任务"
      align="center"
      :append-to-body="true"
      :visible.sync="voluntarilyAllocationVisible"
      @closed="closeDialog"
    >
      <el-table :data="tableData" tooltip-effect="dark" height="400px">
        <el-table-column label="检测项目">
          <template slot-scope="scope">
            {{ scope.row.detectionItemName }}
          </template>
        </el-table-column>
        <el-table-column label="委托单号">
          <template slot-scope="scope">
            {{ scope.row.entrustOrderNum }}
          </template>
        </el-table-column>
        <el-table-column label="样品名称">
          <template slot-scope="scope">
            {{ scope.row.sampleName }}
          </template>
        </el-table-column>
        <el-table-column label="样品编号">
          <template slot-scope="scope">
            {{ scope.row.sampleNum }}
          </template>
        </el-table-column>
        <el-table-column label="检测人" align="center">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="23">
                <el-input
                  v-model="scope.row.detectionPeopleLabelList"
                  disabled
                ></el-input>
              </el-col>
              <el-col :span="1">
                <div
                  class="selectProductStandard"
                  @click="selectUser(scope.$index)"
                >
                  +
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="计划检测时间">
          <template slot-scope="scope">
            {{ scope.row.detectionDateTime }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button :disabled="!submitLoad" type="primary" @click="onSubmit()"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
    <ChoiceUserDialog
      v-if="userDialogFormVisible"
      :dialog-form-visible.sync="userDialogFormVisible"
      :detection-people-id-list.sync="detectionPeopleList"
      @choiceUser="choiceUser"
    />
  </div>
</template>
<script>
import {
  VoluntarilyAllocationTaskGetList,
  VoluntarilyAllocationTaskAdds,
} from "../../api/EntrustTaskManage/EntrustTask";
import ChoiceUserDialog from "../../../ModulePermission/components/Permission/ChoiceUserDialog.vue";
import _ from "lodash";

export default {
  name: "VoluntarilyAllocationTaskDialog",
  components: {
    ChoiceUserDialog
  },
  props: {
    taskIdList: {
      type: Array,
      default: () => [], // 必填
    },
    dialogVoluntarily: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
  },
  data() {
    return {
      // 选择的数据下标
      choiceIndex: -1,
      detectionPeopleList: [],
      loading: false,
      voluntarilyAllocationVisible: false,
      tableData: [],
      userDialogFormVisible: false,
      submitLoad: true,
    };
  },
  created() {
    this.voluntarilyAllocationVisible = this.dialogVoluntarily;

    VoluntarilyAllocationTaskGetList({ taskIdList: this.taskIdList }).then(
      (res) => {
        this.tableData = res.data;
      }
    );
  },
  methods: {
    // 确定
    onSubmit: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        var state = false;
        for (let i = 0; i < this.tableData.length; i++) {
          if (
            this.tableData[i].detectionPeopleList === null ||
          this.tableData[i].detectionPeopleList.length === 0
          ) {
            state = true;
            break;
          }
        }
        if (state) {
          this.$message.error("请选择检测人");
          this.submitLoad = true;
          return false;
        }
        VoluntarilyAllocationTaskAdds(this.tableData).then((res) => {
          this.submitLoad = true;
          this.closeDialog();
        });
      }
    }, 2000),
    // 选择人员的弹框关闭
    choiceUser(data) {
      if (data !== null && data.length !== 0) {
        this.tableData[this.choiceIndex].detectionPeopleLabelList = "";
        this.tableData[this.choiceIndex].detectionPeopleList = [];
        for (let i = 0; i < data.length; i++) {
          this.tableData[this.choiceIndex].detectionPeopleLabelList +=
            data[i].name + ",";
          this.tableData[this.choiceIndex].detectionPeopleList.push(data[i].id);
        }
        this.tableData[this.choiceIndex].detectionPeopleLabelList =
          this.tableData[this.choiceIndex].detectionPeopleLabelList.substring(
            0,
            this.tableData[this.choiceIndex].detectionPeopleLabelList.length - 1
          );
      }
      this.choiceIndex = -1;
    },
    // 选择人员
    selectUser(index) {
      this.detectionPeopleList = this.tableData[index].detectionPeopleList;
      this.choiceIndex = index;
      this.userDialogFormVisible = true;
    },
    // 关闭弹框
    closeDialog() {
      this.voluntarilyAllocationVisible = false;
      this.$emit("update:dialogVoluntarily", false);
      this.$emit("update:taskIdList", []);
      this.$emit("close");
    },
  },
};
</script>
<style scoped>
.selectProductStandard {
  padding-top: 6px;
  width: 30px;
  color: white;
  font-size: 25px;
  height: 33px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
